<template>
  <div class="container">
    <!-- 左半部分 -->
    <div class="left">
      <!-- 左上 -->
      <div class="left-top">
        <!-- 分类 category -->
        <div class="category">
          <div class="title">作品分类</div>
          <div>
            <div class="cate1" style="background: url(/img/cateico.png) no-repeat 0 0">奇幻玄幻</div>
            <div class="cate1" style="background: url(/img/cateico.png) no-repeat 0 -100px">武侠仙侠</div>
          </div>
          <div>
            <div class="cate1" style="background: url(/img/cateico.png) no-repeat 0 -200px">历史军事</div>
            <div class="cate1" style="background: url(/img/cateico.png) no-repeat 0 -300px">都市娱乐</div>
          </div>
          <div>
            <div class="cate1" style="background: url(/img/cateico.png) no-repeat 0 -400px">竞技同人</div>
            <div class="cate1" style="background: url(/img/cateico.png) no-repeat 0 -500px">科幻游戏</div>
          </div>
          <div>
            <div class="cate1" style="background: url(/img/cateico.png) no-repeat 0 -600px">悬疑灵异</div>
            <div class="cate1" style="background: url(/img/cateico.png) no-repeat 0 -700px">二次元</div>
          </div>
          <div>
            <div class="cate1" style="background: url(/img/cateico.png) no-repeat 0 -800px">花语女生</div>
            <div class="cate1" style="background: url(/img/cateico.png) no-repeat 0 -900px">全部作品</div>
          </div>
        </div>
        <!-- 轮播 carousel -->
        <div class="carousel">
          <el-carousel>
            <el-carousel-item>
              <img src="/img/carousel/53ab10dd1c9ac70eb90a551864d7ec39.jpeg" alt="" />
            </el-carousel-item>
            <el-carousel-item
              ><img src="/img/carousel/d19a9fc0af05df2f9c199c871dcaff0e.jpeg" alt="" />
            </el-carousel-item>
            <el-carousel-item
              ><img src="/img/carousel/aa4e179a0c6f4ee22961260bc2bf4730.jpeg" alt=""
            /></el-carousel-item>
            <el-carousel-item
              ><img src="/img/carousel/c74f1df7faf082e072ece3ac533e0448.jpeg" alt=""
            /></el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <!-- 左下 -->
      <div class="left-bottom">
        <!-- 1 -->
        <div class="prev">
          <a href="#" class="title">12月双倍月票预告</a>
          <ul>
            <li>11月新星:《盖世人亡》</li>
            <li>11月新星:《盖世人亡》</li>
            <li>11月新星:《盖世人亡》</li>
            <li>11月新星:《盖世人亡》</li>
            <li>11月新星:《盖世人亡》</li>
            <li>11月新星:《盖世人亡》</li>
          </ul>
          <a class="more" href="#">查看更多<i class="el-icon-arrow-right"></i></a>
        </div>
        <!-- 2 -->
        <div class="after">
          <div class="news">
            <a href="#" class="top-news">新生少年,三魂盖世:盖世</a>
            <div class="news-lists">
              <div><span>[历史]</span><a href="#">重生成了大明朱允炆：开万世之太平</a></div>
              <div><span>[玄幻]</span><a href="#">重生成了大明朱允炆：开万世之太平</a></div>
              <div><span>[科幻]</span><a href="#">重生成了大明朱允炆：开万世之太平</a></div>
              <div><span>[玄幻]</span><a href="#">重生成了大明朱允炆：开万世之太平</a></div>
              <div><span>[玄幻]</span><a href="#">重生成了大明朱允炆：开万世之太平</a></div>
            </div>
          </div>
          <div class="news">
            <a href="#" class="top-news">新生少年,三魂盖世:盖世</a>
            <div class="news-lists">
              <div><span>[历史]</span><a href="#">重生成了大明朱允炆：开万世之太平</a></div>
              <div><span>[玄幻]</span><a href="#">重生成了大明朱允炆：开万世之太平</a></div>
              <div><span>[科幻]</span><a href="#">重生成了大明朱允炆：开万世之太平</a></div>
              <div><span>[玄幻]</span><a href="#">重生成了大明朱允炆：开万世之太平</a></div>
              <div><span>[玄幻]</span><a href="#">重生成了大明朱允炆：开万世之太平</a></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右 -->
    <div>
      <!-- 榜 -->
      <div class="top-lists">
        <div class="title">
          <span>月票榜</span>
          <span style="color: #999; font-size: 12px">更多<i class="el-icon-arrow-right"></i></span>
        </div>
        <!-- 1 -->
        <div class="top-other">
          <div><span style="background-color: #d32f2f; color: #fff">1</span><a href="#">最强战神</a></div>
          <span>8826</span>
        </div>
        <div class="top-other">
          <div>
            <span style="background-color: #fc7403; color: #fff">2</span><a href="#">星际生存从侵略开始</a>
          </div>
          <span>4328</span>
        </div>
        <div class="top-other">
          <div><span style="background-color: #f8cc1c; color: #fff">3</span><a href="#">逆天邪神</a></div>
          <span>3033</span>
        </div>
        <div class="top-other">
          <div><span>4</span><a href="#">最强战神</a></div>
          <span>8826</span>
        </div>
        <div class="top-other">
          <div><span>5</span><a href="#">最强战神</a></div>
          <span>8826</span>
        </div>
        <div class="top-other">
          <div><span>6</span><a href="#">最强战神</a></div>
          <span>8826</span>
        </div>
        <div class="top-other">
          <div><span>10</span><a href="#">最强战神</a></div>
          <span>8826</span>
        </div>
        <div class="top-other">
          <div><span>10</span><a href="#">最强战神</a></div>
          <span>8826</span>
        </div>
        <div class="top-other">
          <div><span>10</span><a href="#">最强战神</a></div>
          <span>8826</span>
        </div>
        <div class="top-other">
          <div><span>10</span><a href="#">最强战神</a></div>
          <span>8826</span>
        </div>
      </div>
      <!-- 游戏开服 -->
      <div class="game-zone">
        <div class="game-title">近期开服</div>
        <div class="list">
          <div class="hot">
            <span>新操戈天下<img src="/img/fire.png" alt="" /></span><span>8区</span><span>10-15 10:00</span>
          </div>
          <div><span>三国之志2</span><span>84区</span><span>10-15 10:00</span></div>
          <div><span>武神三国志</span><span>27区</span><span>10-15 10:00</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 20px auto;
  display: flex;
}
.left-top {
  display: flex;
  // justify-content: start;
}
.category {
  width: 236px;
  // padding-left: 10px;
  background-color: #fff;
  > div:nth-child(odd) {
    background-color: #fafafa;
  }
  > div:nth-child(even) {
    background-color: #f0f0f0;
  }
  .title {
    height: 53px;
    line-height: 52px;
    padding-left: 16px;
  }
  .title ~ div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .cate1 {
    height: 50px;
    line-height: 50px;
    text-align: center;
    // background-position: 0 0;
    padding-left: 26px;
  }
}
.carousel {
  width: 718px;
  margin-left: 5px;
}
.left-bottom {
  display: flex;
  .prev {
    width: 204px;
    margin: 5px 0px;
    padding: 10px 16px;
    background-color: #fafafa;
    .title {
      display: inline-block;
      font-size: 14px;
      font-weight: 600;
      color: #b01f2e;
      margin: 10px 0;
    }
    ul > li {
      margin: 12px 20px;
      margin-right: 0;
      font-size: 12px;
    }
    .more {
      color: #999;
      font-size: 12px;
      margin-top: 10px;
    }
  }
  .after {
    margin: 5px 5px;
    width: 684px;
    background-color: #fff;
    border: 1px solid #f0f0f0;
    padding: 10px 16px;
    display: flex;
    justify-content: space-around;
    .news {
      // border: 1px solid #333;
      .top-news {
        display: inline-block;
        margin: 20px 0;
        padding-left: 15px;
        width: 330px;
        font-weight: 600;
        color: #b01f2e;
      }
      .news-lists {
        text-align: center;
        div {
          margin: 15px 0;
          span {
            color: #999;
          }
          a {
            color: #333;
            margin-left: 10px;
          }
        }
        div:last-child {
          margin: 0;
        }
      }
    }
  }
}
.top-lists {
  width: 204px;
  border: 1px solid #f0f0f0;
  padding: 15px 15px;
  // margin: 10px 0;
  background-color: #f5f5f5;
  .title {
    display: flex;
    padding-bottom: 6px;
    // border-bottom: 1px solid #d8d8d8;
    justify-content: space-between;
    > :first-child {
      font-weight: 600;
    }
  }

  .top-other {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    border-bottom: 1px solid #d8d8d8;
    div {
      span {
        margin-right: 10px;
        display: inline-block;
        width: 18px;
        line-height: 18px;
        text-align: center;
        color: #a9aeb7;
      }
      a {
        color: #333;
        width: 116px;
        // 文本溢出
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        font-size: 14px;
        text-overflow: ellipsis;
      }
    }
    > span {
      font-size: 12px;
      color: #999;
    }
    &:last-child {
      padding-bottom: 0px;
    }
  }
  .top-other:last-child {
    border: 0;
  }
}
.game-zone {
  width: 236px;
  border: 1px solid #f0f0f0;
  box-sizing: border-box;
  margin: 5px 0;
  padding: 9px 10px;
  background-color: #fff;
  .game-title {
    font-weight: 600;
    margin: 10px 0;
  }
  .list {
    div {
      padding: 8px 0;
      display: flex;
      justify-content: space-between;
    }
    .hot {
      color: #e84848;
    }
  }
}
</style>
